<template>
  <div class="fee-wrap">
    <a-row :gutter="gutter">
      <a-col :lg="10" :xl="8" :xxl="6">
        <div class="top-btns">
          <a-button type="primary" @click="gofeefeeRecharge">
            <a-icon type="money-collect" />加盟费充值
          </a-button>
          <a-button type="primary" @click="backList"><a-icon type="rollback" />返回</a-button>
        </div>  
      </a-col>
    </a-row>
    <div class="top-settle">
      <p>加盟费: <span>{{participation}}</span></p>
    </div>
    <a-form class="search-form" :form="form">
      <a-row :gutter="gutter">
        <a-col :lg="8" :xl="5" :xxl="3">
          <a-form-item label="支付类型：">
            <a-select style="width: 80%" v-model="searchParams.payment_type">
              <a-select-option
                v-for="item in paymentList"
                :key="item.value"
                :value="item.value"
              >{{item.label}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="5" :xxl="3">
          <a-form-item label="支付状态：">
            <a-select style="width: 80%" v-model="searchParams.payment_status">
              <a-select-option
                v-for="item in paymentStatusList"
                :key="item.value"
                :value="item.value"
              >{{item.label}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="11" :xxl="10">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 30%" v-model="searchParams.time_type">
                <a-select-option value="1">创建时间</a-select-option>
                <a-select-option value="2">支付时间</a-select-option>
              </a-select>
              <date style="width: 70%" :value="time" @change="dateChange"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="8" :xxl="4">
          <a-form-item label="流水号：">
            <a-input style="width: 100%" v-model.trim="searchParams.no" placeholder="请输入查询条件" />
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="8" :xxl="5">
          <div class="top-btns">
            <a-button @click="searrchList" type="primary">查询</a-button>
            <a-button @click="resetcondition">重置</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      :columns="columns"
      rowKey="id"
      :dataSource="columnsData"
      :pagination="pagination"
      :loading="loading"
    ></a-table>
    <pagination
      :total="total"
      @loadDataList="pageInit"
      ref="pageBand"
    />
    <div class="modal-wrap">
      <a-modal
        class="common-pop"
        title="加盟费充值"
        v-model="visible"
        :destroyOnClose="true"
        :maskClosable="false"
        :footer="null"
      >
        <div>
          <fee-recharge
            :uuid="$route.query.id"
            @closePop="closeRecharge"
          />
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { partnerParticipation } from '../../../store/providerApi'
// 加盟费信息
export default {
  name: 'fee',
  components: {
    feeRecharge:()=> import('./feeRecharge.vue')
  },
  data() {
    return {
      total: 0,
      participation: '',
      visible: false,
      form: this.$form.createForm(this),
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 10
      },
      pagination: false,
      paymentList: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '手动',
          value: 1
        },
        {
          label: '微信',
          value: 2
        },
        {
          label: '支付宝',
          value: 3
        }
      ],
      paymentStatusList: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '未处理',
          value: 1
        },
        {
          label: '成功',
          value: 2
        },
        {
          label: '失败',
          value: 3
        }
      ],
      time: [],
      searchParams: {
        payment_type: 0,
        payment_status: 0,
        no: '',
        time_type: '1',
        start_time: 0,
        end_item: 0
      },
      loading: false,
      columns: [
        {
          title: '编号',
          dataIndex: 'id'
        },
        {
          title: '流水号',
          dataIndex: 'order_no'
        },
        {
          title: '金额（元）',
          dataIndex: 'amount'
        },
        {
          title: '支付方式',
          dataIndex: 'pay_way',
          customRender(pay_way) {
            if (pay_way == 1) {
              return '手动'
            } else if (pay_way == 2) {
              return '微信'
            } else if (pay_way == 3) {
              return '支付宝'
            }
          }
        },
        {
          title: '支付状态',
          dataIndex: 'pay_status',
          customRender(pay_status) {
            if (pay_status == 0) {
              return '未处理'
            } else if (pay_status == 1) {
              return '成功'
            } else if (pay_status == 2) {
              return '失败'
            }
          }
        },
        {
          title: '备注',
          dataIndex: 'remark'
        },
        {
          title: '创建时间',
          dataIndex: 'created_at'
        },
        {
          title: '支付时间',
          dataIndex: 'paid_at'
        }
      ],
      columnsData: []
    }
  },
  // mounted () {
  //   this.pageInit()
  // },
  methods: {
    pageInit (info) {
      this.loading = true
      partnerParticipation({
        id: this.$route.query.id,	
        pay_way: this.searchParams.payment_type,
        status: this.searchParams.payment_status,
        time_type: this.searchParams.time_type,
        start_time: this.searchParams.start_time,
        end_time: this.searchParams.end_time,
        order_no: this.searchParams.no,
        page: info.page,
        num: info.pageSize
      }).then(res => {
        this.loading = false
        var array = res.data.list
        for (let i = 0; i < array.length; i++) {
          array[i]['index'] = (info.page - 1) * info.pageSize + (i + 1)
        }
        this.columnsData = array
        this.participation = res.data.participation
        // 分页器总页数
        this.total = res.data.total_num
      })
    },
    // 时间改变
    dateChange({ date, start_time, end_time }) {
      this.time = date
      this.searchParams.start_time = start_time
      this.searchParams.end_time = end_time
      console.log(date, start_time, end_time)
    },
    // 重置
    resetcondition() {
      this.time = []
      this.searchParams = {
        payment_type: 0,
        payment_status: 0,
        no: '',
        time_type: '1',
        start_time: 0,
        end_item: 0
      }
      this.$refs.pageBand.getData()
    },
    // 打开加盟费充值弹窗
    gofeefeeRecharge() {
      this.visible = true
    },
    closeRecharge () {
      this.visible = false
      this.$refs.pageBand.getData()
    },
    // 搜索
    searrchList() {
      this.$refs.pageBand.getData()
    },
    backList() {
      this.$router.push('/menu/provider/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.fee-wrap {
  margin-top: 15px;
  .top-settle {
    height: 56px;
    display: flex;
    align-items: center;
    // justify-content: space-around;
    border: 1px solid #eee;
    margin-top: 12px;
    margin-bottom: 12px;
    p{
      margin-bottom: 0;
      padding-left: 20px;
    }
  }
}
</style>